<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
							<th>创建时间</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
    //JS中的调试技巧:断点,日志(console.log),排除法
    //当debugger或日志输出都不起作用,首先清浏览器缓存,然后再试,还不可以说明出现了严重语法问题
    $(function(){
      //debugger //第一个断点必须是这个单词debugger的位置,后续还可以在运行时加断点
      $("#pageId").load("doPageUI",function(){
    	  //debugger
    	  doGetObjects();//异步加载用户行为日志信息
      });
      //在查询按钮上注册点击事件
      //$(".input-group-btn .btn-search").on("click",doQueryObjects);
      //$(".input-group-btn .btn-delete").on("click",doDeleteObjects);
      $(".input-group-btn")
      .on("click",".btn-search",doQueryObjects)
      .on("click",".btn-delete",doDeleteObjects)
      //全选按钮事件注册
       $("#checkAll").change(doChangeTbodyCheckBoxState);
      //tbody中checkbox对象事件注册
       $("#tbodyId").on("change","input:checkbox",doChangeTheadCheckBoxState);
    });
    
    //修改thead中checkbox对象状态
    function doChangeTheadCheckBoxState(){
     //1.获取所有tbody中checkbox对象的状态,并进行逻辑与操作
     var flag=true;//初始值不能等于false
     $("#tbodyId input:checkbox")
     .each(function(){
    	 flag=flag&&$(this).prop("checked");
     })
     //2.修改thead中checkbox对象状态
     $("#checkAll").prop("checked",flag);
    }
    
    //修改tbody中checkbox对象状态
    function doChangeTbodyCheckBoxState(){
    	//1.获取thead中checkbox对象状态
    	//这里的$(this)指向的对象为thead中的checkbox对象
    	var flag=$(this).prop("checked");
    	//2.修改tbody中checkbox对象状态
    	$("#tbodyId input:checkbox").prop("checked",flag);
    }
    
    //获取选中checkbox对象中value属性的值并存储到数组
    function doGetCheckedIds(){
    	//1.定义数组,用于存储选中的记录id
    	var array=[];//new Array();
    	//2.获取所有checkbox对象,并进行迭代,获取value属性值,然后存储到数组.
    	$("#tbodyId input:checkbox")//获取tbodyId对应的元素中类型为checkbox的input对象
    	.each(function(){//迭代所有类型为checkbox的input对象
    		if($(this).prop("checked")){//获取checkbox对象的checked属性并校验
    			array.push($(this).val());//将选中的记录的value属性值存储到数组
    		}
    	});
    	//3.返回存储了记录id值的数组对象
    	return array;
    }
    //执行客户端删除按钮的事件
    function doDeleteObjects(){
    	//debugger
    	//1.获取页面上选中的checkbox的值(这里设置的是记录id值)
    	var idArray=doGetCheckedIds();
    	if(idArray.length==0){
    		alert("请先选择");
    		return;
    	}
    	//2.给出提示信息(您确定删除吗)
    	if(!confirm("确认删除吗"))return;
    	//3.发送异步请求执行删除业务
    	//3.1定义url
    	var url="log/doDeleteObjects";
    	//3.2定义参数
    	var params={"ids":idArray.toString()};//[1,2,3].toString()=="1,2,3"
    	//3.3基于ajax技术发送请求
    	$.post(url,params,function(result){
    		if(result.state==1){
    			alert(result.message);
    			doRefreshAfterDeleteOK();
    		}else{
    			alert(result.message);
    		}
    	})
    }
    //删除以后的刷新操作:要么继续查询当前页数据,要么查询上一页数据(最后一页)
    function doRefreshAfterDeleteOK(){
    	//1.获得当前页码值,总页数,全选状态
    	var pageCurrent=$("#pageId").data("pageCurrent");
    	var pageCount=$("#pageId").data("pageCount");
    	var allChecked=$("#checkAll").prop("checked");
    	//2.基于当前页码值以及全选状态修改当前页码值
    	if(pageCurrent==pageCount&&allChecked&&pageCurrent>1){
    		pageCurrent--;
    	    $("#pageId").data("pageCurrent",pageCurrent);
    	}
    	//3.重新执行查询
    	doGetObjects();
    }

    //基于查询按钮事件,执行日志信息的查询操作
    function doQueryObjects(){
    	//1.初始化当前页码值
    	$("#pageId").data("pageCurrent",1);
    	//2.执行查询操作
    	doGetObjects();
    }
    //启动ajax异步操作,查询用户行为日志信息
    function doGetObjects(){
    	//设置thead中checkbox对象的初始状态
    	 $("#checkAll").prop("checked",false);
    	//1.定义请求参数
    	 var pageCurrent=$("#pageId").data("pageCurrent");
    	//debugger
    	//在js中非0数字,非undefined,非空串默认用在boolean表达式中都认为是true.
    	 if(!pageCurrent)pageCurrent=1;//当pageCurrent没有值时给一个默认值
    	//var params="pageCurrent="+pageCurrent;//普通的字符串连接
    	//var params=`pageCurrent=${pageCurrent}`;//模板字符串(``反引号引起来)
    	
    	 var params={"pageCurrent":pageCurrent};//JS对象(JSON格式)
    	//获取页面上用户表单数据,可以基于此表单数据进行查询
    	 var uname=$("#searchNameId").val();
    	 if(uname)params.username=uname;
    	
    	//2.定义请求url
    	 var url="log/doFindPageObjects";
    	//3.发送异步请求执行查询,并处理结果
    	//$.getJSON(url,params,function(result){
    	//	doHandleQueryResponseResult(result);
    	//});
    	//简化写法
    	 $.getJSON(url,params,doHandleQueryResponseResult);
    }
    //处理查询操作返回的结果
    function doHandleQueryResponseResult(result){//JsonResult
    	if(result.state==1){//正常信息
    		//1.呈现当前页的用户行为日志记录
    		doSetTableBodyRows(result.data.records);
    		//2.呈现当前的分页信息(总记录数,总页数,当前页,...)
    		doSetPagination(result.data);//reault.data为服务端业务层返回给控制层的pageObject
    	}else{//异常信息
    		//alert(result.message);//后续可能修改呈现异常信息的方式
    		doHandleQueryResponseError(result.message);
    	}
    }
    //处理日志查询时服务端响应的错误信息
    function doHandleQueryResponseError(message){
    	//设置tbody中的内容信息
    	$("#tbodyId").html(`<tr><td colspan='7'>${message}</td></tr>`);
    	//重新初始化分页信息
    	doSetPagination({"rowCount":0,"pageCount":0,"pageCurrent":1});
    }
    //将用户行为日志记录呈现在table的tbody位置
    function doSetTableBodyRows(records){
    	//1.获取tbody对象,并清空内容
    	var tBody=$("#tbodyId");
    	tBody.empty();//清空tbody中内容
    	//2.在tbody中追加日志记录(基于数组的forEach函数迭代数组,=>为一个箭头运算符,左边为数组中的一个元素,右边为对这个元素的操作)
    	records.forEach(item=>tBody.append(doCreateRow(item)));
    }
    //基于数据创建当前行对象
    function doCreateRow(item){

				/*`<tr>
    	          <td><input type='checkbox' class='cBox' value=${item.id}></td>
    	          <td>${item.username}</td>
    	          <td>${item.operation}</td>
    	          <td>${item.method}</td>
    	          <td>${item.params}</td>
    	          <td>${item.ip}</td>
    	          <td>${item.time}</td>
    	          <td>${item.createdTime}</td>
    	        </tr>`*/
		return "<tr><td><input type='checkbox' class='cBox' value="+item.id+"></td>"+
		"<td>"+item.username+"</td>"+
		"<td>"+item.operation+"</td>"+
		"<td>"+item.method+"</td>"+
		"<td>"+item.params+"</td>"+
		"<td>"+item.ip+"</td>"+
		"<td>"+item.time+"</td>"+
		"<td>"+(new Date(item.createdTime).toLocaleString())+"</td>"+
		"</tr>";
    }

</script>






